<html>
    <head>
        <!-- Include the other jQuery goodness -->
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="./jquery.form.js"></script>
        <script type="text/javascript" src="./jquery.jollaback.js"></script>

        <!-- Use it -->
        <script type="text/javascript">
            $(function(){
                $('.feedback').jollaback('user_feedback_form');
                $('#clickable').click(function() { alert('you clicked me, silly goose!'); });
            });
        </script> 
    <style type="text/css">
        body
        {
            color:black;
            font-family:Arial,Verdana,sans-serif;
            font-size:10px;
            margin:60px;
            padding:0;
        }

        /* Style the link that launches the feedback form */
        a.feedback
        {
            background-color:rgb(236,246,255);
            border:2px double black;
            color:black;
            cursor:pointer;
            font-size:13px;
            font-weight:bold;
            -moz-transform:rotate(90deg);
            padding:10px;
            position:fixed;
            writing-mode:tb-rl; 
            -webkit-transform:rotate(90deg);
            text-decoration:none;
            top:200px;
            left:-35px;
            z-index:10000;
        }

        /* Style the highlighter div that allows users to select an element */
        div#jollaback_highlight 
        {
            background-color:rgba(220,30,30,0.4);
            border:2px dashed black;
            cursor:pointer;
            display:none;
            height:0;
            left:0;
            margin:0;
            padding:0;
            position:absolute;
            top:0;
            width:0;
        }
    </style>
    </head>
    <body>

        <!-- Required jollaback DOM -->
        <a class="feedback" href="#">FEEDBACK</a>
        <div id="jollaback_highlight"></div>
        <form id="user_feedback_form" method="POST" action="/backend.php">
            <p>
                We want you to help make our site better and we appreciate you taking the time to 
            </p>
            <strong>Email:</strong> <br />
            <input id="user_feedback_email" name="user_feedback_email" type="text" size="20" /><br />
            <strong>Feedback:</strong><br />
            <textarea id="user_feedback" name="user_feedback" rows="5" cols="20"></textarea>
            <span id="start_user_feedback_interaction">Interact</span>
        </form>

        <!-- Normal website based DOM -->
        <div>
            <button id="clickable" class="jollaback">I'm a clickable button</button>
            <div class="jollaback" style="padding:10px;">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <div style="padding:10px;">
                <p class="jollaback">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p class="jollaback">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <ol class="jollaback">
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
            </ol>
        </div>
    </body>
</html>
